<!DOCTYPE html>
<html>
<head>
    <title>Blueprint System</title>
    <style>
        body {
            margin: 0;
        }
        #blueprint-container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #1E1E1E;
            position: relative;
        }

        /* 添加画布控制菜单样式 */
        .canvas-controls {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: rgba(30, 30, 30, 0.8);
            border: 1px solid #3E3E3E;
            border-radius: 4px;
            padding: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 100;
        }

        .canvas-controls button {
            background: #2D2D2D;
            border: 1px solid #3E3E3E;
            color: #E0E0E0;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 12px;
        }

        .canvas-controls button:hover {
            background: #3E3E3E;
        }

        .zoom-display {
            color: #B0B0B0;
            font-size: 12px;
            min-width: 50px;
            text-align: center;
        }
    </style>

    <style>
        #variables-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 250px;
            background: rgba(30, 30, 30, 0.9);
            border: 1px solid #3E3E3E;
            border-radius: 4px;
            z-index: 100;
            color: #E0E0E0;
            font-family: Arial, sans-serif;
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #3E3E3E;
        }

        .panel-header h3 {
            margin: 0;
            font-size: 14px;
        }

        #add-variable {
            background: #2D2D2D;
            border: 1px solid #3E3E3E;
            color: #E0E0E0;
            border-radius: 4px;
            padding: 2px 8px;
            cursor: pointer;
        }

        .variables-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .variable-item {
            padding: 8px 10px;
            border-bottom: 1px solid #252525;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
        }

        .variable-item:hover {
            background: #252525;
        }

        .variable-actions {
            display: flex;
            gap: 5px;
        }

        .variable-actions button {
            background: none;
            border: none;
            color: #B0B0B0;
            cursor: pointer;
            font-size: 12px;
        }

        .variable-actions button:hover {
            color: #E0E0E0;
        }
    </style>

    <style>
        /* 右键菜单样式 */
        .blueprint-context-menu {
            position: absolute;
            background: #2D2D2D;
            border: 1px solid #3E3E3E;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            min-width: 150px;
            color: #E0E0E0;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }

        .menu-title {
            padding: 8px 12px;
            background: #1A1A1A;
            border-bottom: 1px solid #3E3E3E;
            font-weight: bold;
        }

        .menu-item {
            padding: 8px 12px;
            cursor: pointer;
        }

        .menu-item:hover {
            background: #3E3E3E;
        }
    </style>
</head>
<body>
<div id="blueprint-container">
    <!-- 在index.html的body中添加变量面板 -->
    <div id="variables-panel">
        <div class="panel-header">
            <h3>Variables</h3>
            <button id="add-variable">+</button>
        </div>
        <div class="variables-list" id="variables-list"></div>
    </div>


    <!-- 添加画布控制菜单 -->
    <div class="canvas-controls">
        <button id="zoom-out">-</button>
        <span class="zoom-display" id="zoom-value">100%</span>
        <button id="zoom-in">+</button>
        <button id="zoom-reset">Reset</button>
    </div>
</div>

<script src="BlueprintSystem.js"></script>
<script src="BlueprintNode.js"></script>
<script src="BlueprintRenderer.js"></script>

<script>
    // 初始化蓝图系统
    const container = document.getElementById('blueprint-container');
    const blueprint = new BlueprintSystem();
    const renderer = new BlueprintRenderer(container, blueprint);

    // 创建节点
    const printNode = new BlueprintNode(
        blueprint.generateNodeId(),
        "Print String",
        { x: 300, y: 100 }
    );
    printNode.addInputPin("Exec", "exec");
    printNode.addInputPin("Message", "string");

    const branchNode = new BlueprintNode(
        blueprint.generateNodeId(),
        "Branch",
        { x: 100, y: 100 }
    );
    branchNode.addInputPin("Exec", "exec");
    branchNode.addInputPin("Condition", "boolean");
    branchNode.addOutputPin("True", "exec");
    branchNode.addOutputPin("False", "exec");

    // 添加节点
    blueprint.addNode(printNode);
    blueprint.addNode(branchNode);

    // 创建连接
    blueprint.addConnection(
        branchNode.id, "True",
        printNode.id, "Exec"
    );

    // 初始渲染
    renderer.render();
</script>

<script>
    // 在index.html的script标签中添加

    class VariablePanel {
        constructor(blueprintSystem, renderer) {
            this.blueprint = blueprintSystem;
            this.renderer = renderer;
            this.panel = document.getElementById('variables-panel');
            this.list = document.getElementById('variables-list');
            this.setupEventListeners();
            this.updateVariablesList();
        }

        setupEventListeners() {
            document.getElementById('add-variable').addEventListener('click', () => this.showAddVariableDialog());
        }

        updateVariablesList() {
            this.list.innerHTML = '';
            const variables = this.blueprint.getAllVariables();

            if (variables.length === 0) {
                this.list.innerHTML = '<div class="empty-message">No variables created</div>';
                return;
            }

            variables.forEach(variable => {
                const item = document.createElement('div');
                item.className = 'variable-item';
                item.innerHTML = `
                <span>${variable.name} (${variable.type})</span>
                <div class="variable-actions">
                    <button class="get-btn" title="Get Variable">G</button>
                    <button class="set-btn" title="Set Variable">S</button>
                    <button class="edit-btn" title="Edit Variable">E</button>
                    <button class="delete-btn" title="Delete Variable">X</button>
                </div>
            `;

                item.querySelector('.get-btn').addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.createGetVariableNode(variable.id);
                });

                item.querySelector('.set-btn').addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.createSetVariableNode(variable.id);
                });

                item.querySelector('.edit-btn').addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.showEditVariableDialog(variable.id);
                });

                item.querySelector('.delete-btn').addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.deleteVariable(variable.id);
                });

                item.addEventListener('dblclick', () => {
                    this.createVariableGetterNode(variable.id);
                });

                this.list.appendChild(item);
            });
        }

        showAddVariableDialog() {
            // 实现添加变量对话框
            const name = prompt("Enter variable name:");
            if (!name) return;

            if (this.blueprint.isVariableNameTaken(name)) {
                alert("Variable name already exists!");
                return;
            }

            const type = prompt("Enter variable type (e.g., int, float, string, bool):", "int");
            if (!type) return;

            const initialValue = prompt("Enter initial value (optional):");

            this.blueprint.dVariable(name, type, initialValue);
            this.updateVariablesList();
        }

        showEditVariableDialog(varId) {
            const variable = this.blueprint.getVariable(varId);
            if (!variable) return;

            const newName = prompt("Enter new name:", variable.name);
            if (newName && newName !== variable.name) {
                if (this.blueprint.isVariableNameTaken(newName)) {
                    alert("Variable name already exists!");
                    return;
                }
                this.blueprint.renameVariable(varId, newName);
            }

            const newType = prompt("Enter new type:", variable.type);
            if (newType && newType !== variable.type) {
                this.blueprint.changeVariableType(varId, newType);
            }

            const newValue = prompt("Enter new value:", variable.value);
            if (newValue !== null) {
                this.blueprint.updateVariable(varId, newValue);
            }

            this.updateVariablesList();
            this.renderer.render();
        }

        deleteVariable(varId) {
            if (confirm("Are you sure you want to delete this variable and all its nodes?")) {
                this.blueprint.removeVariable(varId);
                this.updateVariablesList();
                this.renderer.render();
            }
        }

        createGetVariableNode(varId) {
            const newNodeId = this.blueprint.generateNodeId();
            const mousePos = this.renderer.getLastMousePosition(); // 获取最后鼠标位置
            const worldPos = mousePos ? this.renderer.screenToWorld(mousePos) : { x: 100, y: 100 };

            const newNode = new GetVariableNode(
                newNodeId,
                varId,
                this.blueprint,
                worldPos // 在鼠标位置创建节点
            );
            this.blueprint.addNode(newNode);
            this.renderer.render();
        }

        createSetVariableNode(varId) {
            const newNodeId = this.blueprint.generateNodeId();
            const mousePos = this.renderer.getLastMousePosition();
            const worldPos = mousePos ? this.renderer.screenToWorld(mousePos) : { x: 100, y: 200 };

            const newNode = new SetVariableNode(
                newNodeId,
                varId,
                this.blueprint,
                worldPos
            );
            this.blueprint.addNode(newNode);
            this.renderer.render();
        }

        createVariableGetterNode(varId) {
            const newNodeId = this.blueprint.generateNodeId();
            const mousePos = this.renderer.getLastMousePosition();
            const worldPos = mousePos ? this.renderer.screenToWorld(mousePos) : { x: 100, y: 300 };

            const newNode = new VariableGetterNode(
                newNodeId,
                varId,
                this.blueprint,
                worldPos
            );
            this.blueprint.addNode(newNode);
            this.renderer.render();
        }
    }

    // 初始化变量面板
    const variablePanel = new VariablePanel(blueprint, renderer);
</script>
</body>
</html>
